import * as echarts from 'echarts'


//亮色图片
function getOption(roadsData, totalData, barData, rankData, grayBar = [100, 100, 100, 100, 100, 100]) {
  const top3 = [...new Set(totalData)].sort((a, b) => b - a).slice(0, 3);
  return {
    color: ['#61A8FF'], //进度条颜色
    grid: {
      left: '6%', //如果离左边太远就用这个......
      right: '2%',
      bottom: '5%',
      top: '5%',
      containLabel: true
    },
    xAxis: [
      {
        show: false
      },
      //由于下边X轴已经是百分比刻度了,所以需要在顶部加一个X轴,刻度是金额,也隐藏掉
      {
        show: false
      }
    ],
    yAxis: {
      type: 'category',
      axisLabel: {
        show: false //让Y轴数据不显示
      },
      itemStyle: {},
      axisTick: {
        show: false //隐藏Y轴刻度
      },
      axisLine: {
        show: false //隐藏Y轴线段
      },
      data: roadsData
    },
    series: [
      //背景色--------------------我是分割线君------------------------------//
      {
        show: true,
        type: 'bar',
        barGap: '-100',
        barWidth: '45%', //统计条宽度
        itemStyle: {
          normal: {
            color: 'rgba(102, 102, 102, .4)'
          }
        },
        z: 1,
        data: grayBar
      },
      //蓝条--------------------我是分割线君------------------------------//
      {
        show: true,
        type: 'bar',
        barGap: '-55%',
        barWidth: '45%', //统计条宽度
        itemStyle: {
          color: function (params) {
            const index = top3.findIndex((item) => item === params.value)

            // 前3颜色着重提示
            if (index === 0) {
              return new echarts.graphic.LinearGradient(
                0, 0, 1, 0, // 从左到右渐变 (x0, y0, x2, y2)
                [
                  { offset: 0, color: 'rgba(240, 42, 39, 0.5)' }, // 渐变起始颜色
                  { offset: 0.3, color: 'rgba(240, 42, 39, 0.7)' }, // 中间颜色
                  { offset: 1, color: 'rgba(240, 42, 39, 1)' } // 渐变结束颜色
                ]
              )
            }

            if (index === 1) {
              return new echarts.graphic.LinearGradient(
                0, 0, 1, 0, // 从左到右渐变 (x0, y0, x2, y2)
                [
                  { offset: 0, color: 'rgba(243, 145, 17, 0.5)' }, // 渐变起始颜色
                  { offset: 0.3, color: 'rgba(243, 145, 17, 0.7)' }, // 中间颜色
                  { offset: 1, color: 'rgba(243, 145, 17, 1)' } // 渐变结束颜色
                ]
              )
            }

            if (index === 2) {
              return new echarts.graphic.LinearGradient(
                0, 0, 1, 0, // 从左到右渐变 (x0, y0, x2, y2)
                [
                  { offset: 0, color: 'rgba(243, 211, 5, 0.5)' }, // 渐变起始颜色
                  { offset: 0.3, color: 'rgba(243, 211, 5, 0.7)' }, // 中间颜色
                  { offset: 1, color: 'rgba(243, 211, 5, 1)' } // 渐变结束颜色
                ]
              )
            }

            return new echarts.graphic.LinearGradient(
              0, 0, 1, 0, // 从左到右渐变 (x0, y0, x2, y2)
              [
                { offset: 0, color: 'rgba(23, 255, 243 ,0.5)' }, // 渐变起始颜色
                { offset: 0.3, color: 'rgba(23, 255, 243 ,0.7)' }, // 中间颜色
                { offset: 1, color: 'rgba(23, 255, 243 ,1)' } // 渐变结束颜色
              ]
            )
          }
        },
        max: 1,
        label: {
          normal: {
            show: true,
            textStyle: {
              color: '#fff' //百分比颜色
            },
            position: 'right',
            //百分比格式
            // formatter: function (data) {
            //   // return (baifenbi[data.dataIndex] * 100).toFixed(1) + '%'
            //   return baifenbi[data.dataIndex]
            // }
          }
        },
        labelLine: {
          show: false
        },
        z: 2,
        data: barData
      },
      //数据条--------------------我是分割线君------------------------------//
      {
        show: true,
        type: 'bar',
        // xAxisIndex: 1, //代表使用第二个X轴刻度!!!!!!!!!!!!!!!!!!!!!!!!
        barGap: '-100%',
        barCategoryGap: '130px',

        barWidth: '45%', //统计条宽度
        itemStyle: {
          normal: {
            barBorderRadius: 200,
            color: 'rgba(22,203,115,0.05)'
          }
        },
        label: {
          normal: {
            show: true,
            //label 的position位置可以是top bottom left,right,也可以是固定值
            //在这里需要上下统一对齐,所以用固定值
            position: ['0', '-14px'],
            rich: {
              //富文本
              white: {
                //自定义颜色
                color: '#c9cdfe',
                fontWeight: 'bold',
              },
              start1: {
                backgroundColor: {
                  // image: uploadedDataURL1
                }
              },
              start2: {
                backgroundColor: {
                  //这里可以添加你想自定义的图片
                  // image: uploadedDataURL2
                }
              },
              green: {
                color: '#70DDA7'
              },
              yellow: {
                color: '#CCB877'
              },
              red: {
                color: '#BC3C47'
              },
              gray: {
                color: '#727CBA'
              }
            },
            formatter: function (data) {
              return (
                '{start2|}{white|' + rankData[data.dataIndex] + '  ' + roadsData[data.dataIndex] + '}'
              )
              //富文本固定格式{colorName|这里填你想要写的内容}
              // if (data.dataIndex === 0) {
              //   return (
              //     '{start1|}{red|' + rankData[data.dataIndex] + '  ' + roadsData[data.dataIndex] + '}'
              //   )
              // } else if (data.dataIndex === 1) {
              //   return (
              //     '{start1|}{yellow|' + rankData[data.dataIndex] + '  ' + roadsData[data.dataIndex] + '}'
              //   )
              // } else if (data.dataIndex === 2) {
              //   return (
              //     '{start1|}{green|' + rankData[data.dataIndex] + '  ' + roadsData[data.dataIndex] + '}'
              //   )
              // } else {
              //   return (
              //     '{start2|}{white|' + rankData[data.dataIndex] + '  ' + roadsData[data.dataIndex] + '}'
              //   )
              // }
            }
          }
        },
        data: barData
      }
    ]
  }

}

export default ({ rank, total, barData, roads, grayBar }) => {
  return getOption(roads, total, barData, rank, grayBar)

}
